<template>
  <view class="container">
    <view class="info-list">
      <view class="info-item">
        <view class="contacts">
          <text class="name">姓名</text>
		  <input class="value" type="text" v-model="userInfo.name" placeholder="请输入称呼"/>
        </view>
      </view>
	  <view class="info-item">
	    <view class="contacts">
	      <text class="name">手机</text>
		  <button class="button btn-normal value" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
		      <text v-if="userInfo.mobile">{{ userInfo.mobile }}</text>
			  <text style="color: #f9211c;margin-left: 2px;">更换手机号</text>
		  </button>
	    </view>
	  </view>
	  <view class="info-item">
	    <view class="contacts">
	      <text class="name">性别</text>
		  <view class="value">
			 <radio-group @change="genderChange">
	            <label class="radio"><radio value="1" color="#00acac" :checked="userInfo.sex == '1' ? true : false"/>男</label>
		        <label class="radio second"><radio value="0" color="#00acac" :checked="userInfo.sex == '0' ? true: false"/>女</label>
			 </radio-group>
		  </view>
	    </view>
	  </view>
	  <view class="info-item">
	    <view class="contacts">
	      <text class="name">生日</text>
		  <input class="value" type="text" v-model="userInfo.birthday" placeholder="生日,如1999-01-01"/>
	    </view>
	  </view>
    </view>
    <!-- 底部操作按钮 -->
    <view class="footer-fixed" v-if="userInfo.id">
      <view class="btn-wrapper">
        <view class="btn-item btn-item-main" @click="save()">保存信息</view>
      </view>
      <view class="btn-wrapper">
        <view class="btn-item btn-item-out" @click="logout()">退出登录</view>
      </view>
    </view>
  </view>
</template>

<script>
  import * as UserApi from '@/api/user'
  import store from '@/store'

  export default {
    data() {
      return {
        //当前页面参数
        options: {},
        // 正在加载
        isLoading: true,
        userInfo: {},
		code: ""
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 当前页面参数
      this.options = options
	  this.getUserInfo()
    },

    methods: {
	  /**
	   * 用户信息
	   * */
      getUserInfo() {
        const app = this
        app.isLoading = true
        UserApi.info()
          .then(result => {
            app.userInfo = result.data.userInfo
            app.isLoading = false
          })
      },
	  
	  genderChange(e) {
		  this.userInfo.sex = e.detail.value
	  },
	  
	  /**
	   * 获取会员手机
	   * */
	  getPhoneNumber(e) {
		  if (e.detail.errMsg == "getPhoneNumber:ok") {
			  this.onAuthSuccess(e)
		  }
	  },
	  getCode(e) {
		const app = this
	    return new Promise((resolve, reject) => {
	      uni.login({
	        provider: 'weixin',
	        success: res => {
	          console.log('res', res)
			  
			  e.detail.code = res.code
			  UserApi.save(e.detail)
			     .then(result => {
			     app.userInfo.mobile = result.data.mobile
				 console.log("app.userInfo.mobile = ", app.userInfo.mobile)
			  })
			  
	          resolve(res.code)
	        },
	        fail: reject
	      })
	    })
	  },
	  onAuthSuccess(e) {
		   console.log("eeee === ", e)
		   this.getCode(e)
		   
	  },
      /**
       * 保存个人信息
       */
      save() {
		  const app = this
		  app.isLoading = true
		  UserApi.save({"name": app.userInfo.name, "sex": app.userInfo.sex, "birthday": app.userInfo.birthday})
		    .then(result => {
		      app.userInfo = result.data
		      app.isLoading = false
			  app.$success('保存成功！')
		 })
      },
      /**
       * 退出登录
       */
       logout() {
           store.dispatch('Logout')
           this.$navTo('pages/user/index')
       }
    }
  }
</script>

<style lang="scss" scoped>
  .info-list {
    padding-bottom: 100rpx;
	margin-top: 25rpx;
  }

  // 项目内容
  .info-item {
    margin: 20rpx auto 20rpx auto;
    padding: 30rpx 40rpx;
    width: 94%;
    box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
    border-radius: 16rpx;
    background: #fff;
  }

  .contacts {
    font-size: 30rpx;
    .name {
      margin-left:0px;
    }
	.value {
		float:right;
		color:#999999;
		text-align: right;
		.second {
			margin-left: .6rem;
		}
	}
  }

  .item-option {
    display: flex;
    justify-content: space-between;
    height: 48rpx;
  }


  // 底部操作栏
  .footer-fixed {
    height: 100rpx;
    z-index: 11;
    .btn-wrapper {
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
    }

    .btn-item {
      flex: 1;
      font-size: 28rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      color: #fff;
      border-radius: 14rpx;
    }

    .btn-item-main {
      background: linear-gradient(to right, #f9211c, #ff6335);
    }
    .btn-item-out {
      margin-top: 20rpx;
      background: #FFFFFF;
      border: 1px solid #00acac;
      color: #666666;
    }

  }
</style>
